<template>
  <div>
    <div class="menubox">
      <div class="item" @click="handleShowMenu('nav')">
        <template v-if="showmenulist !== 'nav'"><img src="@/assets/third/nav.png" /></template>
        <template v-if="showmenulist === 'nav'"><img src="@/assets/third/nav-active.png" /></template>
      </div>
      <div class="line"></div>
      <div class="item" @click="handleShowMenu('dantitu')">
        <template v-if="showmenulist !== 'dantitu'"><img src="@/assets/third/dantitu.png" /></template>
        <template v-if="showmenulist === 'dantitu'"><img src="@/assets/third/dantitu-active.png" /></template>
      </div>
      <div class="line"></div>
      <div class="item">
        <img src="@/assets/third/cheliang.png" />
      </div>
      <div class="line"></div>
      <div class="item">
        <img src="@/assets/third/mianji.png" />
      </div>
      <div class="line"></div>
      <div class="item">
        <img src="@/assets/third/juanlian.png" />
      </div>
      <div class="line"></div>
      <div class="item">
        <img src="@/assets/third/dayin.png" />
      </div>
      <div class="line"></div>
      <div class="item">
        <img src="@/assets/third/quanping.png" />
      </div>
      <div class="line"></div>
      <div class="item">
        <img src="@/assets/third/delete.png" />
      </div>
    </div>
    <transition name = "menulist">
      <div class="menuitem" v-if="showmenulist === 'nav'">
        <div class="item" @click="planitemshow.item1=!planitemshow.item1">
          <div class="icon"></div>
          <div class="title">土地利用规划</div>
          <div class="xiala">
            <img v-show="!planitemshow.item1" src="@/assets/third/xiajiantou.png" />
            <img v-show="planitemshow.item1" src="@/assets/third/shangjiantou.png" />
          </div>
        </div>
        <div class="planning" v-show="planitemshow.item1">
          <span :class="{'active':showcontent.overallPlanning}" @click="showcontent.overallPlanning=!showcontent.overallPlanning">总体规划</span>
          <span :class="{'active':showcontent.controlAreaPlanning}" @click="showcontent.controlAreaPlanning=!showcontent.controlAreaPlanning">管制区规划</span>
          <span :class="{'active':showcontent.landConsolidationPlanning}" @click="showcontent.landConsolidationPlanning=!showcontent.landConsolidationPlanning">土地整治规划</span>
        </div>
        <div class="item" @click="planitemshow.item2=!planitemshow.item2">
          <div class="icon"></div>
          <div class="title">城市规划</div>
          <div class="xiala">
            <img v-show="!planitemshow.item2" src="@/assets/third/xiajiantou.png" />
            <img v-show="planitemshow.item2" src="@/assets/third/shangjiantou.png" />
          </div>
        </div>
        <div class="planning" v-show="planitemshow.item2">
          <span :class="{'active':showcontent.landUsePlanning}" @click="showcontent.landUsePlanning=!showcontent.landUsePlanning">用地规划</span>
          <span :class="{'active':showcontent.controlledLandUsePlanning}" @click="showcontent.controlledLandUsePlanning=!showcontent.controlledLandUsePlanning">控规用地规划</span>
          <span :class="{'active':showcontent.deepensLandUsePlan}" @click="showcontent.deepensLandUsePlan=!showcontent.deepensLandUsePlan">总规深化用地规划</span>
        </div>
        <div class="item" @click="planitemshow.item3=!planitemshow.item3">
          <div class="icon"></div>
          <div class="title">土地利用现状</div>
          <div class="xiala">
            <img v-show="!planitemshow.item3" src="@/assets/third/xiajiantou.png" />
            <img v-show="planitemshow.item3" src="@/assets/third/shangjiantou.png" />
          </div>
        </div>
        <div class="datebox" v-show="planitemshow.item3">
          <div class="yearselect" @click="showcontent.landUse1=!showcontent.landUse1">
            <div class="value">2015</div>
            <template v-if="showcontent.landUse1"><img src="@/assets/third/selected.png" /></template>
            <template v-if="!showcontent.landUse1"><img src="@/assets/third/noselect.png" /></template>
          </div>
          <div class="yearselect" @click="showcontent.landUse2=!showcontent.landUse2">
            <div class="value">2016</div>
            <template v-if="showcontent.landUse2"><img src="@/assets/third/selected.png" /></template>
            <template v-if="!showcontent.landUse2"><img src="@/assets/third/noselect.png" /></template>
          </div>
          <div class="yearselect" @click="showcontent.landUse3=!showcontent.landUse3">
            <div class="value">2017</div>
            <template v-if="showcontent.landUse3"><img src="@/assets/third/selected.png" /></template>
            <template v-if="!showcontent.landUse3"><img src="@/assets/third/noselect.png" /></template>
          </div>
          <div class="yearselect" @click="showcontent.landUse4=!showcontent.landUse4">
            <div class="value">2018</div>
            <template v-if="showcontent.landUse4"><img src="@/assets/third/selected.png" /></template>
            <template v-if="!showcontent.landUse4"><img src="@/assets/third/noselect.png" /></template>
          </div>
          <div style="clear:both;"></div>
        </div>
        <div class="item" @click="planitemshow.item4=!planitemshow.item4">
          <div class="icon"></div>
          <div class="title">年度变更影像</div>
          <div class="xiala">
            <img v-show="!planitemshow.item3" src="@/assets/third/xiajiantou.png" />
            <img v-show="planitemshow.item3" src="@/assets/third/shangjiantou.png" />
          </div>
        </div>
        <div class="datebox" v-show="planitemshow.item4">
          <div class="yearselect" @click="showcontent.changeImage1=!showcontent.changeImage1">
            <div class="value">2015</div>
            <template v-if="showcontent.changeImage1"><img src="@/assets/third/selected.png" /></template>
            <template v-if="!showcontent.changeImage1"><img src="@/assets/third/noselect.png" /></template>
          </div>
          <div class="yearselect" @click="showcontent.changeImage2=!showcontent.changeImage2">
            <div class="value">2016</div>
            <template v-if="showcontent.changeImage2"><img src="@/assets/third/selected.png" /></template>
            <template v-if="!showcontent.changeImage2"><img src="@/assets/third/noselect.png" /></template>
          </div>
          <div class="yearselect" @click="showcontent.changeImage3=!showcontent.changeImage3">
            <div class="value">2017</div>
            <template v-if="showcontent.changeImage3"><img src="@/assets/third/selected.png" /></template>
            <template v-if="!showcontent.changeImage3"><img src="@/assets/third/noselect.png" /></template>
          </div>
          <div class="yearselect" @click="showcontent.changeImage4=!showcontent.changeImage4">
            <div class="value">2018</div>
            <template v-if="showcontent.changeImage4"><img src="@/assets/third/selected.png" /></template>
            <template v-if="!showcontent.changeImage4"><img src="@/assets/third/noselect.png" /></template>
          </div>
          <div style="clear:both;"></div>
        </div>
      </div>
    </transition>

    <transition name="menulist">
      <div class="dantituList" v-if="showmenulist === 'dantitu'">
        <ul>
          <li class="active">2000现状图</li>
          <li>10000土地利用现状图</li>
          <li>项目红线</li>
        </ul>
      </div>
    </transition>

  </div>
</template>

<script>
    export default {
      data () {
          return {
              showmenulist: '',
              showcontent:{
                  overallPlanning:false,
                  controlAreaPlanning:false,
                  landConsolidationPlanning:false,
                  landUsePlanning:false,
                  controlledLandUsePlanning:false,
                  deepensLandUsePlan:false,
                  landUse1:false,
                  landUse2:false,
                  landUse3:false,
                  landUse4:false,
                  changeImage1:false,
                  changeImage2:false,
                  changeImage3:false,
                  changeImage4:false,
              },
              planitemshow:{
                  item1:false,
                  item2:false,
                  item3:false,
                  item4:false,
              }
          }
      },
      methods: {
          handleShowMenu(flag){
              if(this.showmenulist === flag) {
                  this.showmenulist = ''
              } else {
                  this.showmenulist = flag
              }
          }
      }
    }
</script>

<style lang="scss" scoped>
  .menubox{
    width:392px;
    height:40px;
    background:#ffffff;
    border-radius:2px;
    left: 30px;
    top: 80px;
    position: absolute;
    z-index: 500;
    border-radius: 4px;
    .item{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 40px;
      cursor: pointer;
      float: left;
      img{
        width: 24px;
        height: 24px;
      }
    }
    .line{
      width: 1px;
      height: 18px;
      margin-top: 10px;
      background: #E6E6E6;
      float: left;
    }
  }
  .menuitem{
    width: 390px;
    border-radius: 4px;
    position: absolute;
    left: 30px;
    top: 135px;
    overflow: hidden;
    z-index: 500;
  .item{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 9px 20px;
    cursor: pointer;
    background: #ffffff;
  .icon{
    width:3px;
    height:16px;
    background: #1570D5;
  }
  .title{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    font-size:16px;
    font-family:PingFang SC;
    font-weight:500;
    line-height:22px;
    margin-left: 3px;
    color: #4d4d4d;
  }
  .xiala{
  img{
    width: 16px;
    height: 16px;
    display: block;
  }

  }
  }
  .planning{
    padding: 19px 0 20px;
    background: rgba(255,255,255,0.8);
  span{
    font-size:15px;
    font-family:PingFang SC;
    font-weight:500;
    line-height:21px;
    color: #666666;
    margin-left: 20px;
    cursor: pointer;
  &.active{
     color: #409EFF;
   }
  }
  }
  .datebox{
    padding: 19px 0 20px;
    background: rgba(255,255,255,0.8);
  .yearselect{
    float: left;
    cursor: pointer;
    margin: 0 20px;
  .value{
    font-size:13px;
    font-family:PingFang SC;
    font-weight:500;
    line-height:18px;
    color: #666666;
  }
  img{
    width: 12px;
    height: 12px;
    display: block;
    margin: auto;
    margin-top: 2px;
  }
  }
  }
  }
  .dantituList {
    width: 240px;
    height: 120px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    position: absolute;
    top: 69px;
    left: 88px;
  li{
    height: 40px;
    font-size: 14px;
    color: #4d4d4d;
    padding-left: 30px;
    line-height: 40px;
    cursor: pointer;
  &:hover{
     background: #E9EBF0;
     color: #666;
   }
  &.active {
     background: #E9EBF0;
     color: #666;
   }
  }
  }
  .menulist-enter-active {
    transition: all 1s ease;
  }
  .menulist-leave-active {
    transition: all 1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .menulist-enter, .menulist-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
    opacity: 0;
    transform: translateY(-20px);
  }
</style>
